<template>
	<view class="service-container">
		<view class="content">
			<view class="service-types">
				<view class="service-type" @click="contactOnlineService">
					<image src="/static/user/customer-service.png" class="service-icon"></image>
					<text class="service-title">在线客服</text>
					<text class="service-desc">工作日 9:00-18:00</text>
				</view>
				
				<view class="service-type" @click="makePhoneCall">
					<image src="/static/wechat.png" class="service-icon"></image>
					<text class="service-title">电话客服</text>
					<text class="service-desc">400-123-4567</text>
				</view>
			</view>
			
			<view class="faq-section">
				<text class="section-title">常见问题</text>
				<view class="faq-list">
					<view class="faq-item" @click="toggleFAQ(0)">
						<text class="faq-question">如何下单？</text>
						<text class="faq-arrow">{{ showFAQ[0] ? '▲' : '▼' }}</text>
					</view>
					<view class="faq-answer" v-if="showFAQ[0]">
						<text>您可以在商品详情页点击"加入购物车"，然后在购物车中确认商品并提交订单。</text>
					</view>
					
					<view class="faq-item" @click="toggleFAQ(1)">
						<text class="faq-question">如何支付？</text>
						<text class="faq-arrow">{{ showFAQ[1] ? '▲' : '▼' }}</text>
					</view>
					<view class="faq-answer" v-if="showFAQ[1]">
						<text>目前支持微信支付和支付宝支付，您可以在订单确认页面选择支付方式。</text>
					</view>
					
					<view class="faq-item" @click="toggleFAQ(2)">
						<text class="faq-question">如何退款？</text>
						<text class="faq-arrow">{{ showFAQ[2] ? '▲' : '▼' }}</text>
					</view>
					<view class="faq-answer" v-if="showFAQ[2]">
						<text>您可以在"我的订单"页面找到需要退款的订单，点击"申请退款"按钮，填写退款原因后提交即可。</text>
					</view>
					
					<view class="faq-item" @click="toggleFAQ(3)">
						<text class="faq-question">配送时间多久？</text>
						<text class="faq-arrow">{{ showFAQ[3] ? '▲' : '▼' }}</text>
					</view>
					<view class="faq-answer" v-if="showFAQ[3]">
						<text>一般情况下，市区内24小时内送达，郊区48小时内送达。特殊情况下可能会有延迟，请谅解。</text>
					</view>
				</view>
			</view>
			
			<view class="feedback-section">
				<text class="section-title">意见反馈</text>
				<textarea 
					v-model="feedback" 
					placeholder="请输入您的意见或建议..." 
					class="feedback-input"
				></textarea>
				<button class="submit-btn" @click="submitFeedback">提交反馈</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
	data() {
		return {
			showFAQ: [false, false, false, false],
			feedback: ''
		}
	},
	computed: {
		...mapGetters(['getIsLogin']),
		
		// 当前登录状态
		isLogin() {
			return this.getIsLogin
		}
	},
	onShow() {
		// 每次显示页面时检查登录状态
	},
	methods: {
		// 联系在线客服
		contactOnlineService() {
			uni.showModal({
				title: '提示',
				content: '即将跳转到微信客服，是否继续？',
				success: (res) => {
					if (res.confirm) {
						// 这里可以集成实际的客服系统
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						})
					}
				}
			})
		},
		
		// 拨打客服电话
		makePhoneCall() {
			uni.makePhoneCall({
				phoneNumber: '4001234567',
				fail: () => {
					uni.showToast({
						title: '拨号失败',
						icon: 'none'
					})
				}
			})
		},
		
		// 切换FAQ显示状态
		toggleFAQ(index) {
			this.$set(this.showFAQ, index, !this.showFAQ[index])
		},
		
		// 提交反馈
		submitFeedback() {
			if (!this.feedback.trim()) {
				uni.showToast({
					title: '请输入反馈内容',
					icon: 'none'
				})
				return
			}
			
			// 这里可以调用API提交反馈
			uni.showLoading({
				title: '提交中...'
			})
			
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				this.feedback = ''
			}, 1500)
		}
	}
}
</script>

<style>
.service-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.content {
	flex: 1;
	padding: 20rpx;
	overflow-y: auto;
}

.service-types {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.service-type {
	flex: 1;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
	margin: 0 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.service-icon {
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 20rpx;
}

.service-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.service-desc {
	font-size: 24rpx;
	color: #999;
}

.faq-section, .feedback-section {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.faq-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1px solid #f5f5f5;
}

.faq-question {
	font-size: 28rpx;
	color: #333;
}

.faq-arrow {
	font-size: 24rpx;
	color: #999;
}

.faq-answer {
	padding: 20rpx 0;
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}

.feedback-input {
	width: 100%;
	height: 200rpx;
	padding: 20rpx;
	border: 1px solid #e0e0e0;
	border-radius: 10rpx;
	font-size: 28rpx;
	margin-bottom: 20rpx;
	box-sizing: border-box;
}

.submit-btn {
	height: 80rpx;
	line-height: 80rpx;
	background-color: #e93b3d;
	color: #fff;
	border: none;
	border-radius: 10rpx;
	font-size: 30rpx;
}
</style>